<template>
    <view class="walletPage">
        <view class="walletBg">
			<view>可提现数量</view>
			<text style="font-weight: bold;font-size: 34upx;color: #ff537b;">{{money || 0}}</text>
			
			<text>当前提现手续费率：{{rate || '0'}}%</text>
		</view> 
		<view class="inputBox">
			<view class="inputBoxTitle">
				<text>提现数量</text>
			</view>
			<view class="inputs">	
				<!-- <text class="moneyIcon">￥</text> -->
				<input v-model="outMoney" :disabled="btype == 2" placeholder="输入数量" />
				<view class="moneyBtn" @click="cashAll">全部提现</view>
			</view>
			<view class="inputs">
				<!-- <text class="moneyIcon">￥</text> -->
				<input v-model="pass" password  placeholder="输入交易密码" />
			</view>
			<block v-if="btype == 1">
				<view class="inputBoxTitle"  style="margin-top: 30upx;">提现方式</view>
				<view class="cashTypes">
					<block v-for="t in typearr">
						<view v-if="t.type =='3'" :class="type==t.type?'activeType':'deactiveType'" @click="selectType(t.type)">
							<image src="/static/image/weixin.png"></image>
							<text>微信</text>
						</view>
						<view v-if="t.type =='2'" :class="type==t.type?'activeType':'deactiveType'" @click="selectType(t.type)">
							<image src="/static/image/zfb.png"></image>
							<text>支付宝</text>
						</view>
						<view v-if="t.type =='1'" :class="type==t.type?'activeType':'deactiveType'" @click="selectType(t.type)">
							<image src="/static/image/bankcard.png"></image>
							<text>银行卡</text>
						</view>
					</block>
				</view>
				<block v-if="type=='2'">
					<view class="inputItem">
						<view style="color: #999;">支付宝昵称</view>
						<input placeholder-style="color:#bbb" disabled v-model="name" placeholder="请输入支付宝昵称"/>
					</view>
					<view class="inputItem">
						<view style="color: #999;">支付宝账号</view>
						<input placeholder-style="color:#bbb" disabled v-model="mobile" placeholder="请输入支付宝账号" />
					</view>
				</block>
				<block v-if="type=='3'">
					<view class="inputItem">
						<view style="color: #999;">微信昵称</view>
						<input placeholder-style="color:#bbb" disabled v-model="name" placeholder="请输入微信昵称"/>
					</view>
					<view class="inputItem">
						<view style="color: #999;">微信号</view>
						<input  placeholder-style="color:#bbb" disabled v-model="mobile" placeholder="请输入微信号"/>
					</view>
				</block>
				<block v-if="type=='1'">
					<picker :range="list" range-key="tip" @change="picBank">
						<view  class="bankPicker flex align-center justify-between">
							<text v-if="cbank">{{cbank.tip}}</text>
							<text v-else style="color: #aaa;">请选择银行卡</text>
							<image src="/static/image/icon/icon-down.png"></image>
						</view>
					</picker>
				</block>
			</block>
			<view class="computeMoney">
				<text>手续费：{{fee | keepTwo}}元</text>
				<text>实际到账：<text style="color: red;">{{received | keepTwo}}</text>元</text>
			</view>
		</view>
		<view class="tips" v-if="money<(outMoney-0)">提示：数量不足</view>
		<view class="btn bcolor1" @click="sureCash">确认提现</view>
		<!-- <view class="cashHistory" @click="toCashHistory">提现记录</view> -->
		<view class="tipsBox">
			<text style="font-size: 26upx;">提现贴士:</text>
			<text style="color: #888;">{{tip}}</text>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
              money:0,
			  outMoney:'',
			  rate:0,
			  tip:'',
			  type:'',
			  name:'',
			  mobile:'',
			  typearr:'',
			  btype:1,
			  cbank:'',
			  list:[],
			  pass:''
            }
        },
        onLoad(op) {	
			this.btype = op.type
			var title = this.btype==1?'余额提现':''
			uni.setNavigationBarTitle({
				title:title
			})
        },
		onShow(){
			this.init()
		},
		onNavigationBarButtonTap(){
			this.toCashHistory()
		},
		computed:{
			fee(){
				var num = 0
				if(this.outMoney){
					num = this.outMoney/100*this.rate-0
				}
				return num
			},
			received(){
				var num = 0
				if(this.outMoney){
					num = this.outMoney - this.fee
				}
				return num
			}
		},
		filters:{
			keepTwo(num){
				num = num -0
				return num?num.toFixed(2):0
			},
			keepFour(num){
				console.log(num)
				return num.substring(num.length-4)
			}
		},
        methods: {
			init() {
				this.$sloading()
				this.$request({
					url: this.$api.wallet.withdrawal_cof,
					method:'post',
					data: {
						b_type: this.btype
					}
				}).then(info => {
					this.$hloading()
					if (info.code == 0) {
						this.typearr = info.data.support_types
						this.money = info.data.balance - 0
						this.rate = info.data.rate || '0'
						this.tip = info.data.tip
					}
				}).catch(info => {
					this.$hloading()
				})
			},
			picBank(e){
				this.cbank = this.list[e.detail.value]
			},
			cashAll(){
				this.outMoney = this.money
			},
			selectType(type){
				this.type = type
				if(type == 2 || type == 3){
					this.name = ''
					this.mobile = ''
					this.$sloading()
					this.$request({
						url: this.$api.wallet.bank_info,
						method:'post',
						data: {
							type:type
						}
					}).then(info => {
						this.$hloading()
						if (info.code == 0) {
							if(!info.data || !info.data.account){
								this.type = ''
								this.$showM(`暂未绑定${type==2?'支付宝':'微信'}，时否前去绑定？`,true,res=>{
									if(res){
										uni.navigateTo({
											url:'/pages/WB/bindzfb?type='+type
										})
									}
								})
								return
							}
							this.name = info.data.account
							this.mobile = info.data.phone
						}
					}).catch(info => {
						this.$hloading()
					})
				}else{
					this.$sloading()
					this.$request({
						url: this.$api.wallet.bank_list,
						method:'post',
						data: {
							type:1
						}
					}).then(info => {
						this.$hloading()
						if (info.code == 0) {
							if(info.data.list.length == 0){
								this.type = ''
								this.$showM('暂未绑定银行卡，时否前去绑定？',true,res=>{
									if(res){
										uni.navigateTo({
											url:'/pages/WB/bindBank'
										})
									}
								})
								return
							}
							info.data.list.map(item=>{
								item.tip = item.bank_name +'('+item.bank_num.substring(item.bank_num.length-4)+')'
							})
							this.list = info.data.list
							console.log(this.list)
						}
						
					}).catch(info => {
						this.$hloading()
					})
				}
			},
			sureCash(){
				if(!this.outMoney){
					this.$showM('请输入提现数量',false)
					return
				}
				if(this.outMoney>this.money-0){
					this.$showM('余额不足',false)
					return
				}
				if(!this.pass){
					this.$showM('请输入交易密码',false)
					return
				}
				if(!this.type){
					this.$showM('请选择提现方式',false)
					return
				}
				if(this.type == 1 && !this.cbank){
					this.$showM('请选择银行卡',false)
					return
				}
				var data = {
					money:this.outMoney,
					b_type:this.btype,
					type:this.type,
					password:this.pass,
					bank_id:this.cbank?this.cbank.id:''
				}
				this.$sloading()
				this.$request({
					url: this.$api.wallet.withdrawal_apply,
					method:'post',
					data: data
				}).then(info => {
					this.$hloading()
					if (info.code == 0) {
						this.$showM('申请成功',false,res=>{
							uni.redirectTo({
								url:'/pages/WB/withdrawalRecode?btype='+this.btype
							})
						})
						this.outMoney = ''
						this.pass = ''
					}else{
						this.$showM(info.msg,false)
					}
				}).catch(info => {
					this.$hloading()
				})
			},
			toCashHistory(){
				uni.navigateTo({
					url:'/pages/WB/withdrawalRecode?btype='+this.btype
				})
			}
        }
    }
</script>

<style scoped lang="less">
	.bankPicker{
		width: 100%;
		padding:10upx 20upx;
		font-size: 28upx;
		background: #f5f5f5;
		margin-top: 20upx;
	}
	.bankPicker image{
		width: 30upx;
		height: 15upx;
	}
	page{
		background: #fff;
	}
	.inputItem{
		display: flex;
		align-items: center;
		margin-top: 20upx;
		border-bottom: 1px solid #eee;
		height: 60upx;
		font-size: 28upx;
	}
	.inputItem input{
		margin-left: 10upx;
		font-size: 28upx;
		flex-grow: 1;
	}
	.cashTypes{
		display: flex;
		align-items: center;
		// justify-content: space-around;
		margin-top: 20upx;
	}
	.cashTypes view{
		display: flex;
		align-items: center;
		font-size: 28upx;
		width: 170upx;
		height: 44upx;
		border-radius: 22upx;
		justify-content: center;
		margin-right: 40upx;
	}
	.activeType{
		border: 1px solid #ff537b;
		color:#ff537b;
	}
	.deactiveType{
		border: 1px solid #eee;
	}
	.cashTypes image{
		width: 34upx;
		height: 34upx;
		margin-right: 10upx;
	}
	.btn{
		line-height: 80upx;
		text-align: center;
		width: 600upx;
		border-radius: 20upx;
		color: #fff;
		font-size: 30upx;
		margin-top: 100upx;
		background-image: linear-gradient(to right,#ffd171,#ff8959);
		margin-left: 75upx;
	}
	.bankText{
		font-size: 30upx;
	}
	.tips{
		font-size: 24upx;
		color: red;
		line-height: 60upx;
		padding-left: 30upx;
	}
	.tipsBox{
		display: flex;
		flex-direction: column;
		padding: 30upx;
		font-size: 24upx;
		line-height: 50upx;
		margin-top: 40upx;
	}
	.cashHistory{
		width: 600upx;
		line-height: 80upx;
		color: #ff537b;
		text-align: center;
		font-size: 30upx;
		border-radius: 10upx;
		bottom: 110upx;
		margin-left: 75upx;
		margin-top: 100upx;
	}
	.computeMoney{
		display: flex;
		justify-content: space-between;
		font-size: 26upx;
		margin-top: 20upx;
	}
	.inputs{
		display: flex;
		align-items: center;
		padding: 20upx 0;
		border-bottom: 1px solid #eee;
	}
	.moneyIcon{
		font-size: 36upx;
		color: #fff;
	}
	.inputs input{
		width: 440upx;
		font-size: 30upx;
		padding: 0 10upx;
	}
	.inputs image{
		width: 50upx;
		height: 50upx;
	}
	.moneyBtn{
		width: 150upx;
		background-image: linear-gradient(to right,#ffd171,#ff8959);
		color: #fff;
		border-radius: 10upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		text-align: center;
		margin-left: 30upx;
	}
	.inputBoxTitle{
		font-size: 28upx;
	}
	.inputBox{
		margin-top: -140upx;
		background: #fff;
		width: 660upx;
		margin-left: 25upx;
		padding: 20upx;
		border-radius: 20upx;
		box-shadow: 0px 0px 7px #eec67e;
	}
	.walletBg{
		color: #000;
		width: 690upx;
		height: 403upx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		padding: 0 30upx;
	}
	.walletBg view{
		font-size: 32upx;
		margin-top: 50upx;
	}
	.walletBg text{
		font-size: 28upx;
		margin-top: 10upx;
	}
</style>
